<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="title">项目详情</span>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="项目编号">
              {{ project.projectCode }}
            </el-descriptions-item>
            <el-descriptions-item label="项目名称">
              {{ project.projectName }}
            </el-descriptions-item>
            <el-descriptions-item label="项目负责人">
              {{ project.projectManager }}
            </el-descriptions-item>
            <el-descriptions-item label="开始日期">
              {{ project.startDate }}
            </el-descriptions-item>
            <el-descriptions-item label="结束日期">
              {{ project.endDate }}
            </el-descriptions-item>
            <el-descriptions-item label="项目状态">
              <el-tag :type="getStatusType(project.status)">{{
                getStatusLabel(project.status)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="总预算">
              {{ formatAmount(project.totalBudget) }}
            </el-descriptions-item>
            <el-descriptions-item label="总人月数">
              {{ project.totalManMonths }}
            </el-descriptions-item>
            <el-descriptions-item label="已用人月数">
              {{ project.usedManMonths }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ project.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              {{ project.updateTime }}
            </el-descriptions-item>
            <el-descriptions-item label="项目描述" :span="2">
              {{ project.projectDesc || "无" }}
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
              {{ project.remark || "无" }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="订单列表" name="orders" lazy>
          <project-order-table v-if="project.projectId" :project-id="project.projectId" />
        </el-tab-pane>

        <el-tab-pane label="供应商列表" name="suppliers" lazy>
          <project-supplier-table v-if="project.projectId" :project-id="project.projectId" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getProjectDetail } from "@/api/attendance/project";
import { ProjectVO } from "@/types/attendance/project";
import ProjectOrderTable from "./components/ProjectOrderTable.vue";
import ProjectSupplierTable from "./components/ProjectSupplierTable.vue";

export default defineComponent({
  name: "ProjectDetail",
  components: {
    ProjectOrderTable,
    ProjectSupplierTable
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const activeTab = ref("basic");
    const project = ref<Partial<ProjectVO>>({});

    // 获取状态标签类型
    const getStatusType = (status: string): "success" | "warning" | "info" | "danger" => {
      const map: Record<string, "success" | "warning" | "info" | "danger"> = {
        "0": "info", // 未开始
        "1": "success", // 进行中
        "2": "warning", // 已暂停
        "3": "danger", // 已终止
        "4": "success" // 已完成
      };
      return map[status] || "info";
    };

    // 获取状态标签文本
    const getStatusLabel = (status: string): string => {
      const map: Record<string, string> = {
        "0": "未开始",
        "1": "进行中",
        "2": "已暂停",
        "3": "已终止",
        "4": "已完成"
      };
      return map[status] || "未知状态";
    };

    // 金额格式化
    const formatAmount = (amount: number | undefined) => {
      if (amount === undefined) return "0.00";
      return amount.toFixed(2) + " 元";
    };

    // 返回上一页
    const goBack = () => {
      router.back();
    };

    // 获取项目详情
    const loadProjectDetail = async () => {
      try {
        const projectId = route.params.id;
        const res = await getProjectDetail(Number(projectId));
        project.value = res.data;
      } catch (error) {
        console.error("获取项目详情失败", error);
      }
    };

    onMounted(() => {
      loadProjectDetail();
    });

    return {
      project,
      activeTab,
      getStatusType,
      getStatusLabel,
      formatAmount,
      goBack
    };
  }
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
